<template>
  <div class="route-manage">
    <div class="route-left">
      <!-- 左边搜索 Start -->
      <div class="left-search">
        <div class="search">
          <a-input
            placeholder="输入产品名称/编码后按下回车搜索"
            v-model="productSearch.keyWords"
            @keyup.enter="upproductList"
          />
        </div>
        <div class="icon">
          <a-icon
            type="plus"
            style="margin-right: 0.625rem"
            class="icon-class"
            @click="addProduct"
          />
          <a-popover
            title="过滤"
            trigger="click"
            placement="bottom"
            :visible="filterClicked"
            @visibleChange="filterChange"
          >
            <template slot="content">
              <div class="filter-content">
                <div>
                  <a-checkbox
                    :checked="!productisCheck"
                    @change="productFilter"
                  >
                    全部
                  </a-checkbox>
                </div>
                <div>
                  <a-checkbox :checked="productisCheck" @change="productFilter">
                    已审核
                  </a-checkbox>
                </div>
              </div>
              <div class="filter-footer">
                <a-button size="small" @click="filterClose">取消</a-button>
                <a-button type="primary" size="small" @click="filterAck">
                  确认
                </a-button>
              </div>
            </template>
            <a-icon type="filter" class="icon-class" />
          </a-popover>
        </div>
      </div>

      <!-- 左边搜索 End -->

      <!-- 左边列表 Start -->
      <div
        :class="['left-list', productList.length == 0 ? 'empty-box' : '']"
        infinite-scroll-immediate-check="false"
        infinite-scroll-listen-for-event="false"
        v-infinite-scroll="handleinfiniteOnLoad"
        infinite-scroll-disabled="busy"
        infinite-scroll-distance="20"
      >
        <a-empty v-if="productList.length == 0" />
        <div v-else>
          <div
            :class="[
              'list-box',
              productInfo.MaterialCode == item.MaterialCode ? 'active' : '',
            ]"
            v-for="item in productList"
            :key="item.MaterialCode"
            @click="getproductInfoFun(item)"
          >
            <div class="list-left">{{ item.RowNo }}</div>
            <div class="list-right">
              {{ item.MaterialName }}（{{ item.MaterialCode }}）
            </div>
          </div>
        </div>
      </div>
      <!-- 左边列表 End -->
    </div>
    <!-- 右边框架 Stratt -->
    <div class="route-right">
      <div class="right-title">
        <a-form layout="inline">
          <a-form-item label="选中工艺">
            <a-select
              v-model="routedefaultValueID"
              style="width: 18.75rem"
              @change="handleChange"
            >
              <a-select-option v-for="item in routeList" :key="item.RouteID">
                {{ item.RouteName }}({{ item.RouteVer }}){{
                  item.IfDefault ? "默认" : ""
                }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <general-button
              @operation="editProduct"
              btnText="编辑"
              btnPowerNum="78F8F1CF-FCBD-470D-83CA-45D0EFCD9358"
              :btnDisabled="!routedefaultValue.RouteID ? true : false"
            ></general-button>
          </a-form-item>
          <a-form-item>
            <general-button
              @operation="copyProduct"
              btnText="复制"
              btnPowerNum="A707D186-FFAD-429F-8F11-6EE9022A5941"
              :btnDisabled="!routedefaultValue.RouteID ? true : false"
            ></general-button>
          </a-form-item>
          <a-form-item>
            <general-button
              @operation="startFun"
              btnText="启用"
              btnPowerNum="19B71C6E-589D-44C3-B69F-616F7B83C4EE"
              :btnDisabled="
                routedefaultValue.RouteID && routedefaultValue.IfDefault
                  ? true
                  : false
              "
            ></general-button>
          </a-form-item>
          <a-form-item v-if="!routedefaultValue.IsCheck">
            <general-button
              @operation="approveFun"
              btnText="审核"
              btnPowerNum="11E5AEA9-4A75-4EC9-9AB8-9B441A1A3149"
              :btnDisabled="!routedefaultValue.RouteID ? true : false"
            ></general-button>
          </a-form-item>
          <a-form-item v-if="routedefaultValue.IsCheck">
            <general-button
              @operation="approveFun"
              btnText="反审核"
              btnPowerNum="11E5AEA9-4A75-4EC9-9AB8-9B441A1A3149"
              :btnDisabled="!routedefaultValue.RouteID ? true : false"
            ></general-button>
          </a-form-item>
          <a-form-item>
            <general-button
              @operation="downloadRouteFun"
              btnText="下载工艺模板"
              btnPowerNum="11E5AEA9-4A75-4EC9-9AB8-9B441A1A3149"
              :btnDisabled="!routedefaultValue.RouteID ? true : false"
            ></general-button>
          </a-form-item>
          <a-form-item>
            <general-button
              @operation="importRouteFun"
              btnText="工艺模板导入"
              btnPowerNum="11E5AEA9-4A75-4EC9-9AB8-9B441A1A3149"
              :btnDisabled="!routedefaultValue.RouteID ? true : false"
            ></general-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="right-info">
        <div class="info-box">
          选中工艺： {{ routedefaultValue.RouteName }}({{
            routedefaultValue.RouteVer
          }}){{ routedefaultValue.IfDefault ? "默认" : "" }}
        </div>
        <div class="info-box">
          创建人：{{ routedefaultValue.CreateUserName || "暂无" }}
        </div>
        <div class="info-box">
          创建时间：<span v-if="routedefaultValue.CreateDt">{{
            routedefaultValue.CreateDt | dateFmt("YYYY-MM-DD HH:mm:ss")
          }}</span>
          <span v-else>暂无</span>
        </div>
        <div class="info-box">
          当前版本：<span v-if="routedefaultValue.RouteVer">{{
            routedefaultValue.RouteVer
          }}</span>
          <span v-else>暂无</span>
        </div>
        <div class="info-box">
          审核人：{{ routedefaultValue.CheckUserName || "暂无" }}
        </div>
        <div class="info-box">
          审核时间：<span v-if="routedefaultValue.CheckDt">{{
            routedefaultValue.CheckDt | dateFmt("YYYY-MM-DD HH:mm:ss")
          }}</span>
          <span v-else>暂无</span>
        </div>
      </div>
      <div class="right-table">
        <div class="top">
          <!-- <div class="navigation-top">
            <div
              :class="['tabs-box']"
              v-for="(item, index) in toptabsList"
              :key="item.type"
              @click="toptabsFun(item)"
            >
              {{ item.name }}
            </div>
          </div> -->
          <div v-for="item in toptabsList" :key="item.type" style="flex: 1">
            <component
              v-if="item.type == toptabsInfo.type"
              :is="toptabsInfo.cName"
              @addprocess="communalFun"
              :ref="toptabsInfo.cName"
              @currentInfo="topcurrentInfoFun"
              :RouteID="routedefaultValueID"
              :technoLogyInfo="routedefaultValue"
              :upCurrentRow="currentItem"
            />
          </div>
        </div>
        <div class="bottom" id="OperationManageID">
          <div class="navigation-bottom">
            <div
              :class="[
                'tabs-box',
                item.type == bottomtabsInfo.type ? 'active' : '',
              ]"
              v-for="item in bottomTabsList"
              :key="item.type"
              @click="bottomtabsFun(item)"
            >
              {{ item.name }}
            </div>
          </div>
          <div
            v-for="item in bottomTabsList"
            :key="item.type"
            style="flex: 1"
            v-show="item.type == bottomtabsInfo.type"
          >
            <component
              ref="workSetTable"
              v-show="item.type == bottomtabsInfo.type"
              :table-hegint="tableHegint"
              :is="bottomtabsInfo.cName"
              @modalFun="belowcommunalFun"
              :ref="bottomtabsInfo.cName"
              :RouteID="routedefaultValueID"
              :topcurrentInfo="currentItem"
              :technoLogyInfo="routedefaultValue"
            />
          </div>
          <!-- <route-manage-tabs
            @addCraft="sopmodalFun"
            ref="sopTabs"
          ></route-manage-tabs> -->
        </div>
      </div>
    </div>

    <!-- 右边框架 End -->

    <!-- 产品添加 Start -->
    <product-form
      :show.sync="productShow"
      :productisEdit="productisEdit"
      :productisCopy="productisCopy"
      :reviseForm="addproductInfo"
      @break="upproductList"
      @routebreak="getrouteListtomaterialCodeFun"
    ></product-form>
    <!-- 产品添加 End -->

    <!-- 工序添加 Start-->
    <process-form
      :show.sync="processShow"
      :reviseForm="addprocessInfo"
      :processisEdit="processisEdit"
      :procedureData="procedureData"
      @Updata="Updata"
    ></process-form>
    <!-- 工序添加 End-->

    <!-- SOP添加 Start -->
    <craft-form
      :show.sync="sopShow"
      :reviseForm="sopInfo"
      :processisEdit="sopEdit"
      @Updata="craftUpdata"
    ></craft-form>
    <!-- SOP添加 End -->

    <!-- 提交导入工艺 Start -->
    <file-model
      :show.sync="routeMouldShow"
      @upList="upproductList"
    ></file-model>
    <!-- 提交导入工艺 End -->
  </div>
</template>

<script>
import ProductForm from "./children/product-form.vue";
import ProcessForm from "./children/process-form.vue";
import CraftForm from "./children/craft-form.vue";
import ProductionTable from "./children/production-table.vue"; //工序表格
import SopTable from "./children/sop-table.vue"; //SOP表格
import WorkSetTable from "./children/workset-table.vue"; //工作集表格
import GeneralButton from "@/components/be-current-btn.vue";
import FileModel from "./children/file-form.vue"; //上传文件
import { getTableScroll } from "@/common/table-calc";
import moment from "moment";
import {
  getrouteList,
  verify,
  deverify,
  getrouteListtomaterialCode,
  defaultRoute,
  routeTemplateDownload,
} from "@/api/router-manage/index";

export default {
  name: "RouteManage",
  components: {
    ProductForm,
    ProcessForm,
    CraftForm,
    ProductionTable,
    SopTable,
    GeneralButton,
    WorkSetTable,
    FileModel,
  },
  data() {
    return {
      routeMouldShow: false, //工艺模板导入弹窗
      toptabsList: [
        {
          name: "工序",
          type: 1,
          cName: "ProductionTable",
          clickName: "addprocessshowFun",
        },
      ], //工序Tab列表
      toptabsInfo: {
        name: "工序",
        type: 1,
        cName: "ProductionTable",
        clickName: "addprocessshowFun",
      }, //工序Tab选择后信息
      bottomTabsList: [
        {
          name: "SOP",
          type: 1,
          cName: "SopTable",
          clickName: "sopmodalFun",
        },
        {
          name: "工作集",
          type: 2,
          cName: "WorkSetTable",
          clickName: "workSetFun",
        },
      ], //下方Tab列表
      bottomtabsInfo: {
        name: "SOP",
        type: 1,
        cName: "SopTable",
        clickName: "sopmodalFun",
      }, //下方选中信息
      addproductInfo: {}, //产品添加信息
      productList: [], //产品列表
      productInfo: {}, //产品信息
      filterClicked: false, //筛选框
      productShow: false, //产品添加弹出框
      productisEdit: false, //产品判断修改还是添加
      productisCopy: false, //工艺判断是否为复制
      processShow: false, //工序添加弹出框
      processisEdit: false, //工序判断是否为修改
      addprocessInfo: {}, //工序信息
      procedureData: [], //工序
      sopShow: false, //添加SOP显示状态
      sopInfo: {}, //SOP信息载体
      sopEdit: false, //是否为修改SOP
      productSearch: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
        isCheck: "",
        keyWords: "",
      }, //产品搜索
      productisCheck: false, //产品筛选条件
      productNum: 0, //产品条数
      currstdOperationInfo: {}, //选中的工序信息
      routeList: [], //工艺列表
      routeSearch: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
        keyWords: "",
      }, //工艺搜索
      routedefaultValue: {}, //选中的工艺信息
      routedefaultValueID: "", //默认的工艺id
      currentItem: {}, //上方表格当前选中的
      busy: true, //是否执行加载列表
      tableHegint: 0,
    };
  },
  methods: {
    //筛选全部还是已审核
    productFilter() {
      this.productisCheck = !this.productisCheck;
    },

    //滚动触底方法
    handleinfiniteOnLoad() {
      this.busy = true;
      setTimeout(() => {
        this.productSearch.pageRequestModel.pageIndex += 1;
        this.getrouteListFun();
      }, 1000);
    },

    //切换工序的表格
    toptabsFun(item) {
      this.toptabsInfo = item;
    },
    //切换下方表格方法
    bottomtabsFun(item) {
      this.bottomtabsInfo = item;
      this.currentItem = {};
    },
    //公用组件方法
    communalFun(value) {
      this[this.toptabsInfo.clickName](value);
    },
    //下方组件方法
    belowcommunalFun(value) {
      this[this.bottomtabsInfo.clickName](value);
    },
    //更新表格
    Updata() {
      this.$refs[this.toptabsInfo.cName][0].popUp();
    },
    //点击获取工艺
    getproductInfoFun(item) {
      this.productInfo = item;
      this.routeSearch.keyWords = item.MaterialCode;
      this.getrouteListtomaterialCodeFun();
    },
    //选择工艺
    handleChange(value, option) {
      this.routedefaultValue = this.routeList.find(
        (item) => item.RouteID == value
      );
    },
    //筛选框状态弹出
    filterChange() {
      this.filterClicked = !this.filterClicked;
    },
    //关闭筛选框
    filterClose() {
      this.filterClicked = false;
      this.productSearch.isCheck
        ? (this.productisCheck = true)
        : (this.productisCheck = false);
    },
    //确认筛选条件
    filterAck() {
      this.productisCheck
        ? (this.productSearch.isCheck = true)
        : (this.productSearch.isCheck = "");
      this.upproductList();
      this.filterClicked = false;
    },
    //添加工艺弹窗
    addProduct() {
      if (!this.hasPermission("98EFF51A-9BB8-4B88-BCC4-E83F4C5478FA")) return;
      this.productisCopy = false;
      this.productisEdit = false;
      this.addproductInfo = {};
      this.productShow = true;
    },
    upproductList() {
      this.productSearch.pageRequestModel.pageIndex = 1;
      this.productList = [];
      this.getrouteListFun();
    },
    //编辑工艺
    editProduct() {
      if (!this.hasPermission("78F8F1CF-FCBD-470D-83CA-45D0EFCD9358")) return;
      if (this.routedefaultValue.IsCheck)
        return this.$message.error("当前工艺已审核,请反审核后再操作编辑");
      this.addproductInfo = JSON.parse(JSON.stringify(this.routedefaultValue));
      this.productisEdit = true;
      this.productisCopy = false;
      this.productShow = true;
    },
    //拷贝工艺
    copyProduct() {
      if (this.routedefaultValue.IsCheck)
        return this.$message.error("当前工艺已审核,请反审核后再操作复制");
      this.addproductInfo = JSON.parse(JSON.stringify(this.routedefaultValue));
      this.productisEdit = true;
      this.productisCopy = true;
      this.productShow = true;
    },
    //启用
    startFun() {
      const that = this;
      this.$confirm({
        title: `确认要启用【${that.routedefaultValue.RouteName}】嘛？`,
        okText: "确认",
        okType: "",
        cancelText: "取消",
        async onOk() {
          const res = await defaultRoute(that.routedefaultValue);
          if (res.Data == "") {
            that.$message.info("启用成功");
            that.getrouteListtomaterialCodeFun();
          } else {
            that.$message.error(res.Data);
          }
        },
        onCancel() {},
      });
    },
    //审核反审核
    async approveFun() {
      var that = this;
      //为true为审核
      if (!this.routedefaultValue.IsCheck) {
        this.$confirm({
          title: `确认要审核【${that.routedefaultValue.RouteName}】嘛？`,
          okText: "确认",
          okType: "",
          cancelText: "取消",
          async onOk() {
            const res = await verify(that.routedefaultValue);
            if (res.Data == "") {
              that.$message.info("审核成功");
              that.getrouteListtomaterialCodeFun();
            } else {
              that.$message.error(res.Data);
            }
          },
          onCancel() {},
        });
      } else {
        this.$confirm({
          title: `确认要反审核【${that.routedefaultValue.RouteName}】嘛？`,
          okText: "确认",
          okType: "",
          cancelText: "取消",
          async onOk() {
            const res = await deverify(that.routedefaultValue);
            if (res.Data == "") {
              that.$message.info("反审核成功");
              that.getrouteListtomaterialCodeFun();
            } else {
              that.$message.error(res.Data);
            }
          },
          onCancel() {},
        });
      }
    },
    //添加工序显示
    addprocessshowFun(item) {
      this.processisEdit = item.isEdit;
      this.addprocessInfo = item.data;
      this.addprocessInfo.RouteID = this.routedefaultValueID;
      this.processShow = item.show;
      this.procedureData = item.procedureData;
    },

    //添加SOP显示
    sopmodalFun(item) {
      this.sopEdit = item.isEdit;
      this.sopInfo = item.data;
      this.sopInfo.RouteID = this.routedefaultValueID;
      this.sopInfo.StdOperationID = this.currentItem.StdOperationID;
      this.sopInfo.StdOperationName = this.currentItem.StdOperationName;
      this.sopShow = item.show;
    },
    //添加工作集显示
    workSetFun(item) {},
    //选择工序的数据
    topcurrentInfoFun(value) {
      this.currentItem = value;
    },
    //更新SOP表格
    craftUpdata() {
      this.$refs[this.bottomtabsInfo.cName][0].popUp();
    },
    //查询产品
    async getrouteListFun() {
      const res = await getrouteList(this.productSearch);
      if (res.Data.Data.length > 0) {
        this.routeSearch.keyWords = res.Data.Data[0].MaterialCode;
        this.productInfo = res.Data.Data[0];
        this.getrouteListtomaterialCodeFun();
      }
      this.productList = this.productList.concat(res.Data.Data);
      this.productNum = res.Data.TotalNumber;
      if (res.Data.Data.length == 0) {
        this.busy = true;
      } else {
        this.busy = false;
      }
    },
    //查询产品工艺
    async getrouteListtomaterialCodeFun() {
      const res = await getrouteListtomaterialCode(this.routeSearch);
      if (res.Data.Data.length > 0) {
        this.routedefaultValue = res.Data.Data[0];
        this.routedefaultValueID = res.Data.Data[0].RouteID;
        this.routeList = res.Data.Data;
        this.currentItem = {};
      }
    },
    /* 下载工艺模板 */
    async downloadRouteFun() {
      let res = await routeTemplateDownload();

      var raw = window.atob(res.Data.File);
      var uInt8Array = new Uint8Array(raw.length);
      for (var i = 0; i < raw.length; i++) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      const blob = new Blob([uInt8Array], {
        type: "application/vnd.ms-exce",
      });
      let url = window.URL.createObjectURL(blob);
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.download = `工艺模板${moment().format("YYYY-MM-DD HH:mm:ss")}.xls`;
      document.body.appendChild(link);
      link.click();
    },

    /* 导入工艺模板 */
    importRouteFun() {
      this.routeMouldShow = true;
    },
  },
  created() {
    this.getrouteListFun();
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.$nextTick(() => {
        this.tableHegint = getTableScroll(120, "OperationManageID");
      });
    });
  },
  updated() {
    this.$nextTick(() => {
      this.tableHegint = getTableScroll(120, "OperationManageID");
    });
  },
};
</script>

<style lang="less" scoped>
.route-manage {
  background-color: #ffffff;

  padding: 0.5rem 1rem;
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;

  .route-left {
    flex: 1;

    .left-search {
      display: flex;
      align-items: center;
      padding-bottom: 0.625rem;
      box-sizing: border-box;
      margin-bottom: 1.25rem;
      border-bottom: 2px solid #f0f2f5;

      .search {
        flex: 1;
      }

      .icon {
        margin-left: 1.25rem;
      }
    }

    .left-list {
      height: calc(100% - 64px);
      overflow-y: auto;

      &::-webkit-scrollbar {
        margin: 0.2rem;
        //整体样式
        height: 0.4125rem;
        width: 0.3rem;
      }

      &::-webkit-scrollbar-thumb {
        //滑动滑块条样式
        border-radius: 0.625rem;
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
        background: #009a9a;
        // background: rgba(2, 35, 60, 1);
      }

      &::-webkit-scrollbar-track {
        //轨道的样式
        -webkit-box-shadow: 0;
        border-radius: 0.625rem;
        background: #ccc;
      }

      &::-webkit-scrollbar-corner {
        background: red;
      }

      .list-box {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        font-size: 0.8125rem;
        padding: 0.9375rem 0.625rem;
        cursor: pointer;
        margin: 0 0.625rem;

        .list-left {
          flex: 2;
        }

        .list-right {
          flex: 10;
        }
      }

      .list-box:hover {
        background-color: #ecf7f8;
      }

      .active {
        background-color: #dcf0ef;
      }
    }
  }

  .route-right {
    margin-left: 1.25rem;
    flex: 5;

    .right-title {
      margin-bottom: 0.625rem;
    }

    .right-info {
      display: flex;
      margin-bottom: 0.625rem;

      .info-box {
        margin-right: 1.25rem;
        font-size: 0.5rem;
      }
    }

    .right-table {
      display: flex;
      flex-direction: column;
      height: calc(100% - 62px - 44px);

      .top {
        flex: 1;
        display: flex;
        overflow: hidden;
        .navigation-top {
          display: flex;

          .tabs-box {
            margin: 0 0.625rem;
            color: #9ea2a6;
            padding: 0.3125rem 1.875rem;
            font-weight: 600;
            cursor: pointer;
          }

          .active {
            background-color: #5bcfc6;
            color: #f0fbfa;
            border-radius: 0.625rem;
          }
        }
      }

      .bottom {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .navigation-bottom {
          display: flex;

          .tabs-box {
            margin: 0 0.625rem;
            color: #9ea2a6;
            padding: 0.3125rem 1.875rem;
            font-weight: 600;
            cursor: pointer;
          }

          .active {
            background-color: #6c5bcf;
            color: #f0fbfa;
            border-radius: 0.625rem;
          }
        }
        .table-box {
          overflow-y: auto;
        }
      }
    }
  }
}

.filter-content {
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid #f0f2f5;
}

.filter-footer {
  display: flex;
  justify-content: flex-end;

  button:nth-child(1) {
    margin-right: 0.625rem;
  }
}

//表格滚动条
/deep/.ant-table-body {
  overflow-x: hidden;

  &::-webkit-scrollbar {
    margin: 0.2rem;
    //整体样式
    height: 0.4125rem;
    width: 0.3rem;
  }

  &::-webkit-scrollbar-thumb {
    //滑动滑块条样式
    border-radius: 0.625rem;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    background: #009a9a;
    // background: rgba(2, 35, 60, 1);
  }

  &::-webkit-scrollbar-track {
    //轨道的样式
    -webkit-box-shadow: 0;
    border-radius: 0.625rem;
    background: #ccc;
  }

  &::-webkit-scrollbar-corner {
    background: red;
  }
}

/deep/.ant-table-fixed-header
  > .ant-table-content
  > .ant-table-scroll
  > .ant-table-body {
  overflow-y: auto !important;
}

.empty-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
